<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>响应式设计测试工具</title>  
		<meta name="Author" content="sunny">
		<style type="text/css">
		.container{width:90%;margin:auto;}
		.tool-area{margin-top:20px;margin-bottom:20px;}
		::-webkit-scrollbar{width:5px;height:8px;}
		/* 滚动槽 */
		::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
			border-radius: 10px;
		}
		/* 滚动条滑块 */
		::-webkit-scrollbar-thumb {
			border-radius: 10px;
			background: rgba(0,0,0,0.1);
			-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
		}
		::-webkit-scrollbar-thumb:window-inactive {
			background: rgba(255,0,0,0.4);
		}
		</style>
	</head>
<body>
	<div class="container">
		<div class="tool-area">
			<span>网址:</span><input type="url" id="url" />
			<span>宽度:</span><input type="number" id="width" value="320" />
			<input type="button" value="<=>" id="exchange" />
			<span>高度:</span><input type="number" id="height" value="480" />
			<input type="button" value="GO" id="goBtn" />
			<span>常用分辨率:</span>
			<select id="resolution">
				<option>请选择</option>
				<option attrWidth="320" attrHeight="240">320 * 240</option>
				<option attrWidth="320" attrHeight="480">320 * 480</option>
				<option attrWidth="400" attrHeight="240">400 * 240</option>
				<option attrWidth="432" attrHeight="240">432 * 240</option>
				<option attrWidth="480" attrHeight="320">480 * 320</option>
				<option attrWidth="640" attrHeight="480">640 * 480</option>
				<option attrWidth="800" attrHeight="480">800 * 480</option>
				<option attrWidth="768" attrHeight="480">768 * 480</option>
				<option attrWidth="854" attrHeight="480">854 * 480</option>
				<option attrWidth="960" attrHeight="640">960 * 640</option>
				<option attrWidth="576" attrHeight="520">576 * 520</option>
				<option attrWidth="486" attrHeight="440">486 * 440</option>
				<option attrWidth="800" attrHeight="600">800 * 600</option>
				<option attrWidth="1024" attrHeight="576">1024 * 576</option>
				<option attrWidth="1024" attrHeight="768">1024 * 768</option>
				<option attrWidth="1152" attrHeight="864">1152 * 864</option>
				<option attrWidth="1280" attrHeight="720">1280 * 720</option>
				<option attrWidth="1280" attrHeight="768">1280 * 768</option>
				<option attrWidth="1280" attrHeight="800">1280 * 800</option>
				<option attrWidth="1280" attrHeight="854">1280 * 854</option>
				<option attrWidth="1280" attrHeight="1024">1280 * 1024</option>
				<option attrWidth="1366" attrHeight="768">1366 * 768</option>
				<option attrWidth="1280" attrHeight="960">1280 * 960</option>
				<option attrWidth="1400" attrHeight="1050">1400 * 1050</option>
				<option attrWidth="1440" attrHeight="900">1440 * 900</option>
				<option attrWidth="1600" attrHeight="900">1600 * 900</option>
				<option attrWidth="1600" attrHeight="1024">1600 * 1024</option>
			</select>
		</div>
		<iframe id="mainFrame" style="height:480px;width:320px;border:1px solid;" src="http://3g.cn/"></iframe>
	</div>
	<script type="text/javascript">
	(function() {
		function _domId(id) {
			return document.getElementById(id)
		}
		var goBtn = _domId('goBtn');
		var mainFrame = _domId('mainFrame');
		var url = _domId('url');
		var width = _domId('width');
		var height = _domId('height');
		var resolution = _domId('resolution');
		var exchange = _domId('exchange');
		function changeView(width, height, url) {
			mainFrame.style.height = height + 'px';
			mainFrame.style.width = width + 'px';
			if (url) {
				mainFrame.setAttribute('src', url);
			}
		}
		goBtn.onclick = function() {
			changeView(width.value, height.value, url.value);			
		}
		exchange.onclick = function() {
			var w = width.value;
			var h = height.value;
			changeView(h, w);
			width.value = h;
			height.value = w;			
		};
		resolution.onchange = function() {
			var option = this.options[this.selectedIndex];
			var attrWidth = option.getAttribute('attrWidth');
			var attrHeight = option.getAttribute('attrHeight');
			
			if (attrWidth && attrHeight) {
				width.value = attrWidth;
				height.value = attrHeight;
				changeView(attrWidth, attrHeight);
			}
		}
	})();		
	</script>
</body>
</html>